<template>
  <div class="card">
    <div class="title">
      <div class="left">
        <div class="cardType">{{ patient.insuType==1?'医保':'自费' }}</div>
        <div class="name">{{ patient.name }}</div>
      </div>
      <div class="right">
        <el-button type="primary" size="small" :icon="Edit" title="修改" @click="updatePatient(patient._id)" ></el-button>
        <el-button type="danger" size="small" :icon="Delete" title="删除" @click="deletePatient(patient._id)" ></el-button>
      </div>
    </div>
    <div class="content">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="证件类型">
          {{ patient.idType==1?'身份证':'户口本' }}
        </el-descriptions-item>
        <el-descriptions-item label="证件号码">
          {{ maskMiddleDigits(patient.idNo) }}
        </el-descriptions-item>
        <el-descriptions-item label="用户性别">
          {{ patient.sex==1?'男':'女' }}
        </el-descriptions-item>
        <el-descriptions-item label="出生日期">
          {{ patient.birthday }}
        </el-descriptions-item>
        <el-descriptions-item label="手机号码">
          {{ patient.emergencyContactPhone }}
        </el-descriptions-item>
        <el-descriptions-item label="婚姻状况">
          {{ patient.maritalStatus==1?'未婚':'已婚' }}
        </el-descriptions-item>
        <el-descriptions-item label="当前住址">
        {{ formatAddress(patient.currentAddress) }}
        </el-descriptions-item>
        <el-descriptions-item label="详细地址">
      {{ patient.detailAddress }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    
  
  </div>
</template>

<script setup>
import { Edit  , Delete } from '@element-plus/icons-vue';
import useConfigStore from '@/stores/moudels/configStore';
import { useRoute , useRouter } from 'vue-router';
import { deletePatientAPI } from '@/api/patient'
import { formatAddress , maskMiddleDigits } from '@/utils/string'
import { ElMessage, ElMessageBox } from 'element-plus';
const props = defineProps(["patient"])
const emits = defineEmits(['deletePatient'])
const route = useRoute()

const router = useRouter()
let configStore = useConfigStore()
//修改就诊人的回调
const updatePatient = (id)=>{
  if(route.path=='/user/RegistrationSetup') {
    router.push({
      path:'/user/manage',
      query:{
        isBack:route.fullPath,
        pId:route.query?.id
      }
    })
  }
   setTimeout(()=>{
    configStore.changePatientShow(2)
    configStore.changePatientId(id)
   },100)
}
//删除就诊人的回调
const deletePatient = (id)=>{
  ElMessageBox.confirm(
    '确定删除该就诊人吗?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then( async () => {
      await deletePatientAPI(id)
      ElMessage({
        type:'success',
        message:'删除成功'
      })
    emits('deletePatient')
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除',
      })
    }
  )
}

</script>

<style lang="scss" scoped>
.card {
  width: 320px;
 margin: 10px;
  border-radius: 10px;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  .title {
    flex: 1;
    display: flex;
    padding: 10px;
    border-radius: 10px;
    align-items: center;
    background-color: #e5e5e5;
    .left {
      display: flex;
      flex: 5;
      align-items: center;
      .cardType {
        width: 40px;
        height: 20px;
        background-color: white;
        color: black;
        border-radius: 10px;
        display: flex;
        font-size: 12px;
        justify-content: center;
        align-items: center;
      }
      .name {
        width: 120px;
        margin-left: 10px;
        font-size: 16px;
        color: white;
        color: black;
      }
    
      
    }
    .right {
      flex: 5;
     margin-left: 40px;
    }
  }
  .content {
   flex: 9;
    
  }
}
</style>
